<!DOCTYPE html>
<html>
<head>
    <title>编辑</title>
    <include file='public/head'>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .layui-legend-size{font-size:14px !important;}
        .layui-nopadding{padding:0 !important;}
        .layui-overflow{overflow:auto;}
        .layui-nomargin{margin: 0 !important;}
        .layui-bottom{border-bottom:1px solid rgb(226, 226, 226);}
        .layui-input{height:30px !important; }
        .layui-form-search-item .layui-inline{margin-bottom: 5px;} 
        .layui-form-search-item label{margin-left: 15px;}
        .layui-table-page {padding: 7px 0px 0px;}
        .layui-field-padding{border-width: 1px;padding:0 0 5px 10px;}
    </style> 
</head>
<body>
<form method="POST" class="js-ajax-form" id="da" action="{:cmf_plugin_url('Member://admin_index/add')}">
    <table class="layui-table layui-nomargin"  style="text-align:center;">
        <!-- <input type="text" class="hidden"  name="cri_id"   value=""> -->
        <tr >
            <input type="hidden" name="id" value="{$da.id}">
            <td class="td-head" style="width:20%;">用户uid</td>  
            <td class="td-body" style="width:80%;">
                <input type="text" class="layui-input" name="uid" value="{$da.uid}" placeholder="请输入用户ID" disabled="disabled"  >
            </td>
        </tr>
        <tr >
            <td class="td-head" style="width:20%;">收件人名称</td>  
            <td class="td-body" style="width:80%;">
                <input type="text" class="layui-input" name="receive_name" value="{$da.receive_name}" placeholder="请输入收件人名称"   >
            </td>
        </tr>
        <tr>
            <td class="td-head">收件人电话号码</td>
            <td class="td-body">
                <input type="text" class="layui-input"  name="receive_phone"  value="{$da.receive_phone}"  placeholder="请输入电话号码" oninput = "value=value.replace(/[^\d]/g,'')">
            </td>
        <tr>
        <tr>
            <td class="td-head">收件地区</td>
            <td class="td-body"style="display:flex">
                    <div id="app" >
                        <div style="float:left">
                            <el-cascader v-model="val" placeholder="点击" :options="options" filterable @change="handleItemChange"></el-cascader>
                        </div>
                        <div v-for="(i,index) in vals" class="hidden" >
                            <input type="text" name="AAA"  class="form-control sort"   :id="i.value" :value='i.label'  > 
                            <!-- <a id="" :v-text="i.label" ></a> -->
                            <!-- label:{{i.label}} - value{{i.value}} -->
                        </div>
                    </div>
                </td>
        <tr>
        <tr>
            <td class="td-head">收件详细地址</td>
            <td class="td-body">
                <input type="text" class="layui-input"  name="address" value="{$da.address}"  placeholder="请输入收件详细地址">
            </td>
        <tr>
        <tr>    
            <td class="td-head">邮政编码   </td>
            <td class="td-body">
                <input type="text" class="layui-input"  name="postal_code" value="{$da.postal_code}"  placeholder="请输入邮政编码" oninput = "value=value.replace(/[^\d]/g,'')">
            </td>
        <tr>
        <tr>
            <td class="td-head" >是否为默认收货地址:</td>  
            <td class="td-body">
                <select name="is_default" type="text"  class="layui-input" >
                    <option value="1" <?php if($da['is_default']==1){echo 'selected'; } ?>  >是</option>
                    <option value="2" <?php if($da['is_default']==2){echo 'selected'; } ?>  >否</option>
                </select>
            </td>
        </tr>
    </table>
</form>

<include file='public/scripts'>
<script src="__STATIC__/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var data = {$data};
var mounteds = {$mounted};
var app = new Vue({
    el: '#app',
    data: {
        vals:[],
        val: [],
        options:data
        },
    methods: {
        handleItemChange() {
            this.vals=getCascaderObj(this.val, this.options);
        },
        chushi(){
            this.val=mounteds;
            // this.val=["120000", "120100", "120116"];
        }
    },
    mounted(){
        this.chushi();
    }
})

</script>

<script> 
function getCascaderObj(val,opt) {
    return val.map(function (value, index, array) {
        for (var itm of opt) {
            if (itm.value == value) { opt = itm.children; return itm; }
        }
        return null;
    });
}
</script>

</body>
</html>

